<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="../Output/Photon-debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        var coerceArray = function (value) {
            if (photon.isArray(value)) {
                return value;
            }
            var value = photon.string.trim(value + '');
            if (value.charAt(0) !== '[') {
                value = '[' + value + ']';
            }

            return JSON.parse(value);
        }

        var Model = photon.observable.model.define(
                function () {
                    Model.base(this);
                    this.results([]);
                },
                {
                    results:null,
                    timeTaken:0,
                    a:{
                        coerce:coerceArray,
                        initialValue:[]
                    },
                    b:{
                        coerce:coerceArray,
                        initialValue:[]
                    },
                    compute:function () {
                        var t = (new Date()).getTime();
                        var results =  photon.array.diff(this.a(), this.b());
                        this.timeTaken((new Date()).getTime() - t);
                        // don't time dom response
                        this.results(results);
                    }
                });

        function rand(x) {
            return Math.floor((Math.random()*x)+1);
        }

        function addRandomData(model) {
            var a = [];
            for (var i=0; i<10000; i++) {
                a[i] = Math.floor((Math.random()*1000)+1);
            }
            var b = a.slice(0);
            for (i = 0; i<10; i++) {
                switch (rand(3)) {
                    case 0:
                        b[rand(b.length)] = rand(2000);
                        break;
                    case 1:
                        b.splice(rand(b.length), 1);
                        break;
                    case 2:
                        a.splice(rand(a.length), 1);
                        break;
                    case 3:
                        b.splice(rand(b.length), rand(4));
                        break;
                }
            }
            model.a(a);
            model.b(b);
        }
        $(function () {
            var model = new Model();
            model.a([1,2,3,4]);
            model.b([1,2,3,4, 5]);
            photon.binding.applyBindings(model, 'Model');

            //var results =  diff(this.a(), this.b(), equalityComparer);
        });
    </script>
</head>
<body>
ArrayA:<input data-bind="value:a"><br>
ArrayB:<input data-bind="value:b"><br>
<button data-action="compute()">compute</button><br>
<span data-bind="innerText:timeTaken"></span><br>
<div id="root">
    <table>
        <tbody>
        <tr data-flow="each:results">
            <td>
                StartA:<span data-bind="innerText:startA"></span><br>
                StartB:<span data-bind="innerText:startB"></span><br>
                DeletedA:<span data-bind="innerText:deletedA"></span><br>
                InsertedB:<span data-bind="innerText:insertedB"></span><br>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>